﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Mvcmediaplayer.ViewModels.VideoBrowseViewModel>" %>
<%@ Import Namespace="Mvcmediaplayer.Helpers" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
	Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

	<script type="text/javascript">

		$(document).ready(function () {

			// the media player 
			var obj = "<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='320'>\n";
			obj = obj + "<param name='source' value='ProgressiveDownloadPlayer.xap' /> \n ";
			obj = obj + "<param name='onError' value='onSilverlightError' /> \n ";
			obj = obj + "<param name='background' value='#3E344A' /> \n ";
			obj = obj + "<param name='minRuntimeVersion' value='4.0.50401.0' /> \n ";
			obj = obj + "<param name='autoUpgrade' value='true' /> \n ";
			obj = obj + "<param name='InitParams' value='mediaurl=<%=Model.Video.Url %>' /> \n ";
			obj = obj + " <a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0' style='text-decoration:none'>  <img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style:none'/></a>";
			obj = obj + "</a>";

			// set it as host control html ,and fade in slowly ^_^
			$("#silverlightControlHost").html(obj).fadeIn("slow");

			// begin star rating system  -_- !
			$(".star").mouseover(function () {
				var span = $(this).parent("span");
				var newRating = $(this).attr("value");
				setRating(span, newRating);
			});


			$(".star").mouseout(function () {
				var span = $(this).parent("span");
				var rating = span.attr("rating");
				setRating(span, rating);
			});

			$(".star").click(function () {
				var span = $(this).parent("span");
				var newRating = $(this).attr("value");
				var text = span.children("span");
				var vId = span.attr("video");
				$.post("/Home/SaveRating", { videoId: vId, rating: newRating },
			function (data) {
				var obj = eval('(' + data + ')');
				if (obj.Success) {
					text.html("Currently rated " + obj.Result.AverageScore + " by " + obj.Result.Votes + " people"); //modify the text
					span.attr("rating", obj.Result.AverageScore); //set the rating attribute
					setRating(span, obj.Result.AverageScore); //update the display
					alert("Thank you, your vote was casted successfully.");
				}
				else {
					alert(obj.Message); //failure, show message
				}
			}
		);
			});

			function setRating(span, rating) {
				span.find('img').each(function () {
					var value = parseFloat($(this).attr("value"));
					var imgSrc = $(this).attr("src");
					if (value <= rating)
						$(this).attr("src", imgSrc.replace("-off.gif", "-on.gif"));
					else
						$(this).attr("src", imgSrc.replace("-on.gif", "-off.gif"));
				});
			}
		});
	</script>
	  <div style="color:White; font-size:20px;">
		<h2><strong><%:Model.Video.Title %></strong></h2>
		</div>
	  <div id="silverlightControlHost"  style=" width:100%;  text-align:left;">
		</div>					
	<br />
		<div class="video_rating"><%= Html.Ratings(Model.Video.Id)%></div>

<div style="border:2px blue;" id="Comments-area">
 <% foreach (var comment in Model.Video.Comments)
	{%>
	<div style="border: 1px solid black;" class='comment_header'>
		<img src='http://www.gravatar.com/avatar/0700fc1343bcd9be89d23ac8b9d8ff21.jpg?s=48' alt='test' />
		<span style=" border-bottom:1px solid black;"><%:comment.User %>=>Said:</span>
		<br />
		<span style=" border-bottom:1px solid black; font-weight:bold;"><%:comment.Subject %></span> 
		<br />
		<span><%:comment.Content %></span>
		<br />
		<span class='comment_date'>at:<%:comment.Datetime %></span>	
	</div>
	 <%} %>
 </div>
 <div style=" color:#0370b5; font-size:20px;"> Comment here:</div>
 <div id="comment-submit">
 <%Html.RenderPartial("Createcomment"); %>
 </div>
	
					
</asp:Content>
